<template>
  <div class="wrapper">
    <ul class="nav nav-tabs ur-nav-tabs2">
      <li class="nav-item" v-for="(nav,index) in navs" :key="index" @click="changeNav(nav)">
<!--        navActive==nav.id-->
        <a class="nav-link" :class="{active:navActiveMap==nav.id}"><i class="iconfont font20" :class="'icon-'+nav.icon"></i>{{nav.name}}</a>
      </li>
    </ul>
    <div class="mt-4">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    components: {},
    props: {},
    data() {
      return {
        navActive:1,
        navs:[
          {id:1,url:'rtuList',name:'RTU监控',icon:'jizhongqi2',limitsId:'2_05_01'},
          {id:2,url:'lightList',name:'单灯监控',icon:'denggan',limitsId:'2_05_02'}
        ]
      }
    },
    watch: {},
    computed: mapState({
      limits:state=>state.user.userInfo.limits,
      navActiveMap:state=>state.comm.navActive
    }),
    methods: {
      changeNav(nav) {
        this.setNavActive(nav.id)
        this.$router.push({path: nav.url})
      },
      ...mapMutations({
        setNavActive:'comm/setNavActive'
      })
    },
    created() {
      let url=this.$route.path.split('/')
      for (let i = 0; i < this.navs.length; i++) {
        let v = this.navs[i]
        if (url.length == 2) {
          if (this.limits.indexOf(v.limitsId) != -1) {
            this.navActive = v.id
            this.$router.push({path: 'devMonitor/' + v.url})
            break
          }
        } else {
          if (v.url == url[2]) {
            this.navActive = v.id
            this.$router.push({path: v.url})
          }
        }
      }
      this.setNavActive(this.navActive)
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
